<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Bootstrap样式表 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>书籍区</title>
<link rel="stylesheet" href="resources/css/user.css">
    <style>
        body {
            background-image: url('resources/bigbi.jpg');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Arial', sans-serif;
            color: #fff; /* 文本颜色 */
        }
        
        .container {
            margin-top: 50px;
        }


		#edit-form{
			display:none;
		}
		
        #user-info-container,
        #edit-form {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            color: black;
        }

        #user-info-container h2,
        #edit-form h2 {
            border-bottom: 2px solid #28a745;
            padding-bottom: 10px;
            margin-bottom: 20px;
            color: #28a745; /* 标题颜色 */
        }

        #user-info-container p {
            margin-bottom: 15px; /* 增加行间距 */
        }

        #user-info-container .btn,
        #edit-form .btn {
            margin-top: 10px;
        }

		footer {
	  		background-color: #000000; /* 黑 色背景 */
	  		color: #fff; /* 白色文字 */
	  		padding: 15px; /* 上下左右各留出15px的空白 */
	 		text-align: center; /* 文字居中 */
	  		font-size: 14px; /* 字体大小 */
		}
	        
        .circle-img {
    	/* 设置图片宽度和高度 */
    	width: 65px; /* 这里设置图片的宽度 */
    	height: 65px; /* 这里设置图片的高度 */
    
    	/* 将图片裁剪成圆形 */
    	border-radius: 50%;
    	border: 2px solid #fff;
  		}
    </style>

    <script>
        // Function to show the edit form
        function showEditForm() {
            document.getElementById("user-info-container").style.display = "none";
            document.getElementById("edit-form").style.display = "block";
        }

        // Function to cancel editing and show the user info form
        function cancelEdit() {
            document.getElementById("edit-form").style.display = "none";
            document.getElementById("user-info-container").style.display = "block";
        }

        // Function to submit the edited form
        function submitEditForm() {
            // Hide the edit form and show the user info form
            document.getElementById("edit-form").style.display = "none";
            document.getElementById("user-info-container").style.display = "block";
        }
      </script>
</head>

<body>

    <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="#">书影音</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="<c:url value = "/home"/>">首页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<c:url value = "/book"/>">读书</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<c:url value = "/movie"/>">影视</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<c:url value = "/music"/>">音乐</a>
                </li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/filter"/>">筛选</a></li>	
                <li class="nav-item active">
                    <a class="nav-link" href="<c:url value = "/user"/>">我的</a>
                </li>
            </ul>
            <c:if test="${not empty sessionScope.user}">
            	<a class="nav-link" style="color:white"
					href="<c:url value = "/user"/>">欢迎您，${user.username }</a>
       	 	</c:if>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
        </div>
    </nav>

    <div class="container">
        <div class="row justify-content-center">
            <!-- 用户信息展示表单 -->
            <div class="col-md-6" id="user-info-container">
                <h2>个人信息</h2>
                <c:if test="${not empty sessionScope.user}">
                    <p class="font-weight-bold" style="font-size:32px"><img src="resources/miaow.png" class="rounded-circle img-fluid circle-img"> <c:out value="${sessionScope.user.username}" /></p><hr>
                    <h4>Email:  </h4><p><c:out value="${sessionScope.user.email}" /></p><hr>
                    <h4>PhoneNo: </h4><p><c:out value="${sessionScope.user.phone}" /></p><hr>
                    <h4>Description: </h4><p><c:out value="${sessionScope.user.description}" /></p><hr>
                    <div class="row">
                        <div class="col">
                            <button onclick="showEditForm()" class="btn btn-success btn-block">编辑</button>
                        </div>
                        <div class="col">
                            <form action="user/mycomment" method="get">
                                <button class="btn btn-secondary btn-block">评论</button>
                            </form>
                        </div>
                        <div class="col">
                            <a href="<c:url value="exit" />"><button
                                    class="btn btn-success btn-block">退出</button></a>
                        </div>
                    </div>
                </c:if>
            </div>

            <!-- 修改表单 -->
            <div class="col-md-6" id="edit-form">
                <h2>编辑信息</h2>
                <form action="<c:url value="edit" />" method="post">
                    <div class="form-group">
                        <label for="edit-username">Username:</label>
                        <input type="text" class="form-control" id="editUsername" name="editUsername"
                            value="${user.username}" readonly required>
                    </div>
                    <div class="form-group">
                        <label for="edit-email">Email:</label>
                        <input type="email" class="form-control" id="editEmail" name="editEmail"
                            value="${user.email}" required placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="edit-phoneNo">PhoneNo:</label>
                        <input type="text" class="form-control" id="editPhoneNo" name="editPhoneNo"
                            value="${user.phone}" required placeholder="Enter phoneNo">
                    </div>
                    <div class="form-group">
                        <label for="edit-description">Description:</label>
                        <input type="description" class="form-control" id="editDescription"
                            name="editDescription" value="${user.description}" required
                            placeholder="Enter description">
                    </div>
                    <div class="form-group">
                        <label for="edit-password">Password:</label>
                        <input type="password" class="form-control" id="editPassword" name="editPassword"
                            value="${user.password}" required placeholder="Enter password">
                    </div>
                    <div class="row">
                        <div class="col">
                            <button type="submit" onclick="submitEditForm()"
                                class="btn btn-success btn-block">保存</button>
                        </div>
                        <div class="col">
                            <button type="button" onclick="cancelEdit()"
                                class="btn btn-secondary btn-block">取消</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <div class="fixed-bottom">
        	<footer class=" text-center py-3"> &copy;
		2023 书影音 </footer>
    </div>

    <!-- 引入Bootstrap的JavaScript和Popper.js，用于处理导航栏的交互效果 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

</html>
